<template>
	<view class="uni_box home">
		<navbar title='任务详情'>
		</navbar>
		<view class="content">
			<view class="rone">
				<view class="ritem" v-for="(item,index) in renone" :key="index">
					<image class="renone" :src="item.image?item.image:'/static/img/renone.png'"></image>
					<text class="renname">{{item.name}}</text>
					<text class="ren">{{item.value}}</text>
				</view>
				<!-- <view class="ritem">
					<image class="renone" src="/static/img/renone.png"></image>
					<text class="renname">任务总量</text>
					<text class="ren">10709人</text>
				</view>
				<view class="ritem">
					<image class="renone" src="/static/img/rentwo.png"></image>
					<text class="renname">名片单价</text>
					<text class="ren">0.2元</text>
				</view>
				<view class="ritem">
					<image class="renone" src="/static/img/renthree.png"></image>
					<text class="renname">已完成</text>
					<text class="ren">8897人</text>
				</view>
				<view class="ritem">
					<image class="renone" src="/static/img/renfour.png"></image>
					<text class="renname">剩余名额</text>
					<text class="ren">10709人</text>
				</view> -->
			</view>
			<view class="wenxin" v-if="content">
				<text>温馨提示:</text>
				<u-parse style="color: #fff;font-size: 24rpx;" :html="content"></u-parse>
				<!-- <text>做完任务后不可退群或删好友，否则雇主投诉会扣除奖励嗷。</text> -->
			</view>
			<view class="rennav">
				<text class="lname">任务类型： <text class="leival">{{info.cate_name}}</text></text>
				<view class="buview">
					<view class="buone" v-if="info.task_1">
						<view class="buleft">
							<view class="quan"></view>
							<view class="quanxian"></view>
						</view>
						<view class="buright">
							<text class="yibu">{{ info.task_1.title }}</text>
							<view class="butwo">
								<view class="bunei">
									<text class="nums">{{info.task_1.qun}}</text>
								</view>
								<view class="fuzhi" @click="copy(info.task_1.qun)">复制</view>
							</view>
							<view class="butwo">
								<text class="jianjie">{{info.task_1.des}}</text>
								<view class="fuzhi" style="margin-left: auto;" @click="copy(info.task_1.des)">复制</view>
							</view>
							

						</view>
					</view>
					<view class="buone" v-if="info.task_2">
						<view class="buleft">
							<image class="quangou" src="/static/img/icon_dyb.png"></image>
						
						</view>
						<view class="buright">
							<text class="yibu lv">{{ info.task_2.title }}</text>
							<view class="mlist">
								<view class="mitem">
									<text class="miao lv">请输入{{ info.cate_name }}</text>
									<view class="butwo">
										<view class="bunei">
											<u-input v-model="fcontent" type="text" :border="false" placeholder="请输入"/>
										</view>
									</view>
								</view>
								<view class="mitem">
									<text class="miao lv">上传你做任务主页截图</text>
									<view class="tuview">
										<view class="tuitem" v-if="fimages.length<5" @click="upload(ind,i)">
											<image class="addtu" src="/static/img/btn_tupian.png"></image>
										</view>
										<view class="tuitem" v-for="(j,jnd) in fimages" :key="jnd">
											<view class="cha" @click="del(ind,jnd)">
												<text>点击移除</text>
											</view>
											<image class="addtu" :src="j"></image>
										</view>
									</view>
								</view>

								<view class="mitem" v-if="info.images">
									<text class="miao lv">示例图</text>
									<view class="tuview">
										<!-- <view class="tuitem" v-if="fimages.length<5" @click="upload(ind,i)">
											<image class="addtu" src="/static/img/btn_tupian.png"></image>
										</view> -->
										<view class="tuitem" v-for="(j,jnd) in info.images" :key="jnd" @click="previewImage(j)">
											<!-- <view class="cha" @click="del(ind,jnd)">
												<text>点击移除</text>
											</view> -->
											<image class="addtu" :src="j"></image>
										</view>
									</view>
								</view>
								<view class="mitem" v-if="info.images">
									<text class="miao lv">二维码图片</text>
									<view class="tuview">
										<!-- <view class="tuitem" v-if="fimages.length<5" @click="upload(ind,i)">
											<image class="addtu" src="/static/img/btn_tupian.png"></image>
										</view> -->
										<view class="tuitem">
											<!-- <view class="cha" @click="del(ind,jnd)">
												<text>点击移除</text>
											</view> -->
											<image class="addtu" :src="info.qrCode" @click="previewImagetwo(info.qrCode)"></image>
										</view>
									</view>
								</view>
							</view>
							<!-- <view class="mlist" v-for="(i,ind) in info.task_2.data">
								<view class="mitem" v-if="i.type == 1">
									<text class="miao lv">{{i.name}}</text>
									<view class="butwo">
										<view class="bunei">
											<u-input v-model="i.data" type="text" :border="false" placeholder="请输入"/>
										</view>
									</view>
								</view>
								<view class="mitem" v-if="i.type == 2">
									<text class="miao lv">上传你做任务主页截图</text>
									<view class="tuview">
										<view class="tuitem" v-if="i.data.length<5" @click="upload(ind,i)">
											<image class="addtu" src="/static/img/btn_tupian.png"></image>
										</view>
										<view class="tuitem" v-for="(j,jnd) in i.data" :key="jnd">
											<view class="cha" @click="del(ind,jnd)">
												<text>点击移除</text>
											</view>
											<image class="addtu" :src="j"></image>
										</view>
									</view>
								</view>
								<view class="mitem" v-if="i.type == 3||i.type == 3">
									<text class="miao lv">{{i.name}}</text>
									<view class="butwo">
										<view class="bunei">
											<u-input v-model="i.data" type="text" :border="false" placeholder="请输入"/>
										</view>
									</view>
								</view>
							</view> -->
							
							
							
						</view>
					</view>
				</view>
			</view>

			<view class="botview">
				<view class="tishi">
					<text class="jzhi">任务截止提交时间：</text>
					<u-count-down :timestamp="info.time" color="#1989F9" @end="ftijiao" separator-color="#1989F9"></u-count-down>
				</view>
				<view class="tijiao" @click="ftijiao">提交任务</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
		baseUrl
	} from '@/utils/config.js';
	export default {
		data() {
			return {
				phone:'',
				timestamp: 86400,
				renids:'',
				info:{},
				renone:[],
				headimg:'',
				upindex:0,
				mid:'',//接口获取id
				content:'',
				fcontent:'',
				fimages:[],

			}
		},
		onLoad(option) {
			if(option.renids){
				this.renids = option.renids
			}
			if(option.mid){
				this.mid = option.mid
			}
			this.getDetail()
			this.getxieyi()
			// console.log(this.renids)
		},
		onShow() {
		},
		methods: {
			async getxieyi(){
				let res = await this.$u.api.getContent({
					code:'mprwxqwxts'
				});
				// this.title = res.title
				this.content = res.content
			},
			async getDetail(){
				let res = await this.$u.api.getCartInfo({
					id:this.mid
				});
				
				this.renone = res.data
				this.info = res.info
				let task_2_data = this.info.task_2.data
				if(task_2_data){
					for(let i in task_2_data){
						if(task_2_data[i].type == 1||task_2_data[i].type == 3||task_2_data[i].type == 4){
							//输入框
							task_2_data[i].data = ''
						}else if(task_2_data[i].type == 2){
							//上传图片
							task_2_data[i].data = []
						}
						
					}
				}
				this.info.task_2.data = task_2_data
				console.log(this.info.task_2.data)
				if(this.info.time <= 0){
					this.$u.toast("报名时间已结束");
					setTimeout(() => {
						// uni.navigateBack({ delta: 1 })
					}, 1000);
				}
			},
			async ftijiao(){
				//点击提交
				// let task_2_data = this.info.task_2.data
				// let parms = []
				// parms =  JSON.parse(JSON.stringify(task_2_data))
				// for(let i in parms){
				// 	if(parms[i].type == 2){
				// 		//图片转格式
				// 		parms[i].data  = parms[i].data.toString()
				// 	}
					
				// }
				// console.log(parms)
				if(!this.fcontent){
					this.$u.toast("请完善信息");
					return false;
				}
				let res = await this.$u.api.doTask({
					id:this.mid,
					content:this.fcontent,
					images:this.fimages.toString()
					// data:parms
				});
				this.$u.toast("操作成功");
				setTimeout(() => {
					// uni.navigateBack()
					this.navrouter("/pages/TPage/MyOrder?&leitype=3")
					// this.navrouter("/pages_subject/twoPage/MyBaoming?id="+this.mid+'&leitype=3');
				}, 1500);
			},
			upload(index,ind) {
				this.upindex = index
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou()
						// this.getavatar();//修改信息
					}
				});
			},
			unloadtou(){
				// console.log(this.head_portrait)
				// let task_2_data = this.info.task_2.data
				let that = this
				uni.uploadFile({
					// url: baseUrl + '/api/uploadImage', //仅为示例，非真实的接口地址
					url: baseUrl + '/common/upload', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'file',
					header: {
						// 'content-type': 'application/json;charset=UTF-8',
						'token':uni.getStorageSync('token'),
					},
					formData: {
						'token':uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						// console.log( JSON.parse(uploadFileRes.data).data);
						// let mpfabu = that.mpfabu
						// task_2_data[that.upindex].data.push(JSON.parse(uploadFileRes.data).data.fullurl)
						// that.info.task_2.data = task_2_data
						that.fimages.push(JSON.parse(uploadFileRes.data).data.fullurl)
						// console.log(that.info.task_2.data)
						that.$forceUpdate()
					}
				});
			},
			del(index,ind){
				let task_2_data = this.info.task_2.data
				let fimages =  this.fimages
				// task_2_data[index].data.splice(ind,1)
				fimages.splice(ind,1)
				this.fimages = fimages
				// this.info.task_2.data = task_2_data
				this.$forceUpdate()
			},
			previewImage(item){
				// console.log('index', index)
				let a= []
				// let list = this.list
				a.push(item)
				uni.previewImage({
					current: item, //预览图片的下标
					urls: this.info.images//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			previewImagetwo(item){
				// console.log('index', index)
				let a= []
				// let list = this.list
				a.push(item)
				uni.previewImage({
					current: item, //预览图片的下标
					urls: a//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 150rpx;
		.rone{
			display: flex;
			flex-direction: row;
			padding: 30rpx;
			.ritem{
				width: 23%;
				margin-right: 2%;
				// height: 178rpx;
				padding: 20rpx 0;
				background: rgba(25,137,249,0.1);
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.renone{
					width: 76rpx;
					height: 76rpx;
					margin-bottom: 8rpx;
				}
				.renname{
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}
				.ren{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #1989F9;
					display: block;
					margin-top: 14rpx;
				}
			}
			.ritem:last-child{
				margin-right: 0;
			}
		}
		.wenxin{
			background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
			border-radius: 10rpx;
			padding: 20rpx 20rpx;
			margin: 30rpx;
			text{
				display: block;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;

			}
		}
		.rennav{
			margin: 60rpx 30rpx 30rpx;
			.lname{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #1989F9;
				display: block;
				margin-bottom: 30rpx;
			}
			.leival{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
				display: inline-block;
				margin-left: 10rpx;
			}
			.buview{
				padding: 30rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				.buone{
					display: flex;
					flex-direction: row;
					margin-top: -12rpx;
					position: relative;
					.buleft{
						display: flex;
						flex-direction: column;
						position: relative;
						margin-right: 30rpx;
						padding-top: 10rpx;
						.quan{
							width: 24rpx;
							height: 24rpx;
							background: #46B2F2;
							border-radius: 50%;
							display: inline-block;
						}
						.quanxian{
							display: inline-block;
							width: 2rpx;
							flex: 1;
							position: relative;
							left: 10rpx;
							background-color: #1989F9;
						}
						.quangou{
							width: 36rpx;
							height: 36rpx;
							position: relative;
							left: -7rpx;
						}
					}
					.buright{
						flex: 1;
						display: flex;
						flex-direction: column;
						padding-top: 30rpx;
						padding-bottom: 20rpx;
						.yibu{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
						}
						.miao{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #46B2F2;
							display: block;
							margin-top: 10rpx;
						}
						.butwo{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin: 20rpx 0;
							.bunei{
								flex: 1;
								// min-height: 68rpx;
								background: #EEEEEE;
								border-radius: 10rpx;
								padding: 10rpx 30rpx;
								display: flex;
								flex-direction: row;
								align-items: center;
								.nums{
									font-family: PingFang SC;
									font-weight: bold;
									font-size: 30rpx;
									color: #333333;
								}
							}
							.fuzhi{
								margin-left: 20rpx;
								width: 150rpx;
								height: 68rpx;
								background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
								border-radius: 10rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-family: PingFang SC;
								font-weight: bold;
								font-size: 32rpx;
								color: #FFFFFF;
							}
						}
						.jianjie{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #3CA8F4;
							// max-width: 90%;
							width: 80%;
							margin-right: 10rpx;
						}
						.lv{
							color: #46B2F2;
						}
						.tuview{
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							margin-top: 30rpx;
							.tuitem{
								width: 200rpx;
								height: 200rpx;
								position: relative;
								border-radius: 10rpx;
								margin: 0 20rpx 20rpx 0;
								.addtu{
									position: absolute;
									width: 100%;
									height: 100%;
									border-radius: 10rpx;
								}
								.cha{
									background-color: rgba(0, 0, 0, 0.4);
									position: absolute;
									width: 100%;
									height: 100%;
									display: flex;
									align-items: center;
									justify-content: center;
									border-radius: 10rpx;
									z-index: 1;
									text{
										font-family: PingFang SC;
										font-weight: 500;
										font-size: 24rpx;
										color: #FFFFFF;
									}
								}
							}
						}
					}
				}
			}
		}

		.botview{
			border-top: 1rpx solid #eee;
			padding: 30rpx;
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 100;
			.tishi{
				display: flex;
				flex-direction: column;
				.jzhi{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #1989F9;
					display: block;
					margin-bottom: 8rpx;
				}
				/deep/.u-countdown{
					font-weight: 500;
				}
			}
			.tijiao{
				margin-left: auto;
				width: 240rpx;
				height: 88rpx;
				background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	
</style>
